<template>
  <div class="background">
    <div class="box list">
      <div v-for="(item1, index1) in list" :key="index1" :value="item1" class="line box">
        <div v-for="(item, index) in list" :key="index" :value="item" class="icon head" :style="{'background-image': 'url('+item+')'}"></div>
      </div>
    </div>
    <img class="welcome-mask" :src="require('../assets/images/welcome-mask.png')" alt="">
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'background',
  computed: {
    ...mapState(['activityGuid'])
  },
  data () {
    return {
      list: [
        require('../assets/images/head1.jpg'),
        require('../assets/images/head2.jpg'),
        require('../assets/images/head3.jpg'),
        require('../assets/images/head4.jpg'),
        require('../assets/images/head5.jpg'),
        require('../assets/images/head1.jpg'),
        require('../assets/images/head2.jpg'),
        require('../assets/images/head3.jpg'),
        require('../assets/images/head4.jpg'),
        require('../assets/images/head5.jpg'),
        require('../assets/images/head1.jpg'),
        require('../assets/images/head2.jpg'),
        require('../assets/images/head3.jpg'),
        require('../assets/images/head4.jpg'),
        require('../assets/images/head5.jpg'),
        require('../assets/images/head1.jpg'),
        require('../assets/images/head2.jpg'),
        require('../assets/images/head3.jpg'),
        require('../assets/images/head4.jpg'),
        require('../assets/images/head5.jpg')
      ]
    }
  },
  mounted () {
    this.getLatestList()
    setInterval(() => {
      this.getLatestList()
    }, 1000 * 60 * 2)
  },
  methods: {
    getLatestList () {
      this.$http({
        url: `${this.$config.baseUrl}/api/api?ifname=ledscreen.led.latest.list`,
        method: 'post',
        data: {
          activity_guid: this.activityGuid,
          num: 20
        }
      }).then(res => {
        if (+res.status === 1) {
          if (res.data.length > 15) {
            this.list = res.data.map(item => {
              return `http://items.ufunet.cn${JSON.parse(item.json_data).face_base64}`
            })
          }
        }
      })
    },
    selectModel () {
      this.$router.push({
        path: '/selectModel'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/color.scss';
@import '../assets/css/mixins.scss';
@keyframes list {
  // 50%{
  //   transform: scale3d(1.5, 1.5, 1.5) translate3d(-9rem,-9rem,0);
  // }
  // 100%{
  //   transform: scale3d(1, 1, 1) translate3d(-18rem,-18rem,0);
  // }
  to{
    transform: translate3d(-18rem,-9rem,0);
  }
}
.background{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:hidden;
}
.list{
  width:100%;
  flex-wrap: wrap;
  position:absolute;
  top:0;
  left:0;
  animation: list 8.88s linear 1s infinite;
  .line:nth-child(2n){
    transform: translate3d(-.9rem, 0, 0);
  }
  .line{
    .head{
      background-size:100% auto;
      width:1.8rem;
      height:1.8rem;
    }
  }
}
.welcome-mask{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:.9;
}
</style>
